<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <title>CFTagLib - CF Tag Library Planning</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <style type="text/css">
  #g_title p, #g_footer p, #g_description p {
    margin: 0;
  }
  /*

  	-- -- -- -- -- -- --
  	Browser Fixes
  	-- -- -- -- -- -- --
  	
  	This file uses CSS filtering methods to fix various
  	layout bugs.

  	Each of the following three imported files is a 
  	separate, browser-specific CSS file that keeps all 
  	hacks out of the main style sheet.
  	
  	Over time, as supporting these browsers no longer
  	remains a priority, cleaning up the hacks is as
  	easy as deleting the @import statement below, or
  	simply no longer linking this file from the HTML.
  	
  */

  /* 
    fix ie6 "peekaboo bug" using the "holly hack". 
    Note, this style only gets applied to ie6
  */
  * html .wrapper {
    height: 0.1%;
  }

  /* 
   * IE5 mac - overrides the IE/Win hack 
   */

  /*\*//*/

  * html #threecolumn div {
  	height: auto;
  }

  /**/


  /* 
   * IE5/Win-specific CSS -ensures #container wraps all content on window resize
   */

  @media tty {
   i{content:"\";/*" "*/}} * html #container { height: 1%; } /*";}
  }/* */
  /* Styling for editable elements. Eventually, this will be part of the style. */
  .editable {
    border: 1px dashed blue;
  }
  
  #footer {
    clear: both;
  }
  
  /* Extra divs hidden by default. The custom CSS can override this though */
  #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {
    display: none;
  }
  
  a img,:link img,:visited img {border: none;}


  /*
    -- -- -- -- -- -- --
    1 Column Layout
    -- -- -- -- -- -- --
  */

  /* Center #container, constrain to 718px width
  ----------------------------------------------- */
  body {
    text-align: center;
  }
  #container {
    width: 718px;
    text-align: left;
    margin: 0 auto;
  }

  #main-content {
    overflow: hidden;
  }

  /** BEGIN CUSTOM SKIN **/
  /* general layout */

  body {
    font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif;
    font-size: 83%;
    margin: 0em;
    padding: 0em;
    border-top: 1em solid #e2e6ec;
    background: #e2e6ec url(container-fill.gif) center repeat-y;
  }
  body div#container {
    padding: 0em;
    margin-top: 0em;
    border-top: 1px solid #e2e6ec; /* a hack: without it Firefox adds top margin in layouts with sidebar */
    background: url(container-top.gif) top no-repeat;
  }
  div#container div.wrapper {
    padding: 0em;
    margin: 0em;
  }
  div#header {
    padding: 0em 35px;
    padding-top: 2em;
    padding-bottom: 2em;
    _padding-bottom: 1em; /* hack for IE6 */
    margin: 0em;
    margin-top: 2em;
    background: url(header-fill.gif) repeat-y;
  }
  div#header div.wrapper {
    padding: 0em;
    margin: 0em;
  }
  div#main-content {
    line-height: 160%;
    color: #3f3f3f;
    background: url(content-top.gif) top no-repeat;
  }
  div#sidebar,div#sidebar-alternate {
    font-size: 83%;
    line-height: 140%;
    color: #3f3f3f;
    background: url(content-top.gif) top no-repeat;
    padding: 0em;
    margin: 0em;
    padding-top: 1.5em;
  }
  div#footer {
    margin-top: 2em;
    background: url(content-top.gif) top no-repeat;
    padding: 1em 35px;
    color: #7f7f7f;
  }
  div#footer hr { /* I don't like this, but I have no idea why that <hr> is there */
    display: none;
  }

  /* adjusting widths for different layouts */

  body#onecolumn div#main-content {
    padding: 0em 35px;
    width: 648px;
  }
  body#twocolumn-right div#main-content {
    padding: 0em 25px;
    width: 420px;
    margin-left: 10px;
  }
  body#twocolumn-left div#main-content {
    padding: 0em 25px;
    width: 420px;
    margin-right: 8px;
    display: inline;
  }
  body#twocolumn-left div#sidebar {
    padding-left: 15px;
    width: 215px;
  }
  body#twocolumn-right div#sidebar {
    padding-right: 15px;
    width: 215px;
  }
  body#threecolumn div#main-content {
    padding: 0em 25px;
    width: 370px;
  }
  body#threecolumn div#sidebar {
    padding-left: 15px;
    width: 125px;
    margin-left: 10px;
    display: inline;
  }
  body#threecolumn div#sidebar-alternate {
    padding-right: 15px;
    width: 125px;
  }

  /* general styles: headings */

  h1, h2, h3, h4, h5, h6, p.description {
    font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif; 
  }
  h1 {
    font-size: 160%;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 400%; /* for padding below, the above line took away other possibilities */
  }
  h2 {
    font-size: 120%;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 400%; /* for padding below, the above line took away other possibilities */
  }
  h3 {
    font-size: 110%;
    font-weight: bold;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    color: black;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 300%; /* for padding below, the above line took away other possibilities */
  }
  h4 {
    font-size: 100%;
    font-weight: bold;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    color: black;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 200%; /* for padding below, the above line took away other possibilities */
  }
  h5 {
    font-size: 100%;
    font-weight: bold;
    color: black;
    display: inline;
  }
  h6 {
    font-size: 100%;
    font-weight: normal;
    color: black;
    display: inline;
  }
  hr {
    background: white;
    height: 1px;
    border: 0em;
    border-top: 1px solid #b3e6e6;
    margin: 1em 0em;
  }

  /* general styles: links */

  a {
    color: #125ebc;
    text-decoration: none;
    border-bottom: 1px solid #125ebc; /* this underline is further away from the text = more legibility */
  }
  a:visited {
    color: #638bbc;
    text-decoration: none;
    border-bottom: 1px solid #638bbc; /* this underline is further away from the text = more legibility */
  }

  /* general styles: lists */

  ul, ol {
    margin-left: 1.8em;
    padding: 0em;
  }
  dt {
    margin-left: 1.8em;
  }
  blockquote {
    margin-left: 1.8em;
  }

  /* general styles: tables */

  table {
    border-collapse: collapse;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: -0.6em;
    margin-right: -0.6em;
  }

  table td,table th {
    padding: 0.3em 0.6em;
    vertical-align: top;
    text-align: left;
  }
  table th {
    border-bottom: 1px solid #b3e6e6;
  }
    table tr td{
      border: 1px solid #b3e6e6;
  }
  
  table caption {
    text-align: left;
    font-weight: bold;
    color: #4FBBBB;
    padding: 0em;
    _padding: 0em 0.6em; /* hack for IE6: it understands padding differently here */
  }

  /* specific styles */

  h1#page-title {
    font-size: 220%;
    font-weight: normal;
    color: #125ebc;
    letter-spacing: -1px;
    display: block;
    border: 0em;
    padding: 0em;
    margin: 0em;
    line-height: 100%;
  }
  div#g_description {
    font-size: 140%;
    font-weight: normal;
    color: #125ebc; 
  }

  /* correcting horizontal margins for different layouts */

  body#twocolumn-left div#header, body#threecolumn div#header {
    padding-left: 25px;
  }

  /** END CUSTOM SKIN **/
  </style>

  <!-- Hack to avoid flash of unstyled content in IE -->
  

<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script> </script>
</head>

<body id="onecolumn">
  <div id="container">
    <div class="wrapper">
      <div id="header">
        <div class="wrapper">
          <h1 id="page-title"><div id='g_title'><p>CF_SELECT</p></div></h1>

          <div style="clear: both;"></div>
          <p class="description"><div id='g_description'>&nbsp;</div></p>
          <div style="clear: both"></div>
        </div>
      </div><a href="cf_form.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&laquo; Previous</a> | <a href="cf_input.html">Next &raquo;</a>
      <!-- /editable --><!-- /wrapper --><!-- /header -->
      <div id="main-content">
        <div class="wrapper">
          <div class="content-item"><div id='g_body'><p></p> 

<link href="style.css" rel="stylesheet">
<p>You can populate a <em>cf_select</em> using a list, an array, a structure, a query, a table, or a SQL statement.</p>
<uL>
<LI>Populate by Query</LI>
<UL><LI>Populate with <em>query</em>, <em>value</em>, and <em>option</em> attributes
	<p class="pre">
      &lt;cf_select name="state" query="states" value="code" option="name"/&gt;
	  </p>
	  </LI>
		<LI>
	  You can also merge values to display in the option.
		<p class="pre">
      &lt;cf_select name="user" query="qryUsers" value="id" option="firstName & ' ' & lastName & ' (' & email & ')'"/&gt;
	  </p>
	  <em>id</em>, <em>firstName</em>, <em>lastName</em> are columns in the recordset <em>qryUsers</em>.
	  </LI>  
	  </UL>
<br/><br/>
<LI>Populate by Table</LI>
<UL><LI>Populate with a <em>table</em>, <em>value</em>, and <em>option</em> attributes.  You can also merge values to display like above.
	<p class="pre">
      &lt;cf_select name="state" table="states" value="code" option="name" result="qryStates"/&gt;
	  </p>
    <UL><li><em>result</em> attribute returns the query result to use elsewhere.</li>
	<li>DSN would be specified here if it wasn't specified at application/page level using <em>request.ui.form.all.config.dsn</em></li>
	<LI>By default, it sorts ascending with the <em>value</em> column.  You can change it using <em>sort</em>, and <em>order</em> with <em>asc</em> or <em>desc</em> value.</LI>
	<LI>Internally it creates a simple query<BR/> 
	<p class="pre">SELECT #VALUE#, #OPTION# FROM #TABLE# ORDER BY #SORT# #ORDER#</p></LI>
	</UL>
	</LI>
	<LI>Note that you can't use merging columns in the <em>option</em> attribute like in <em>populate by query</em> above.  In order to use that feature, you must include the <em>columnList</em> attribute to specifiy the table columns you want to merge:
		<p class="pre">
      &lt;cf_select name="user" table="users" value="id" option="firstName & ' ' & lastName & ' (' & email & ')'" columnList="firstName,lastName,email"/&gt;
	  </p>
	</LI><br/>
	<LI><strong>Notice:</strong> If you don't specify the <em>name</em> attribute, it will take the value of the <em>table</em> attribute.  For example:
	<p class="pre">
	      &lt;cf_select table="states" value="cd" option="name"/&gt;
	</p>
	</LI>
	</UL>

<br/>
	<LI><p>Populate by SQL
		<uL>
		    <li>Populate with an <em>SQL</em>, <em>value</em>, and <em>option</em> attributes
				<p class="pre">
			      &lt;cf_select name="user" sql="select * from users" value="id" option="firstName & ' ' & lastName & ' (' & email & ')'"/&gt;
				 </p>
			</li>
		    <LI>If the SQL statement is long, it would look ugly.  You may want to put it in a separate tag:
				<p class="pre">
			      &lt;cf_select name="user" value="id" option="firstName & ' ' & lastName & ' (' & email & ')'"&gt;
				  <br/>
				    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;cf_sql&gt;select * from users order by firstName, lastName desc&lt;/cf_sql&gt;
				  <br/>
				  &lt;/select&gt;
				  				</p>
			</LI>
		</uL></p>
	</LI>
	<br/>
	
    <LI>Populate by list</LI> 
	<ul>
	<li>Populate with a <em>list</em> attribute
	<p class="pre">
      &lt;cf_select name="state" list="states"/&gt;
	  </p>
	  OR
	  	<p class="pre">
      &lt;cf_select name="state" list="'James,Johnny,Doug,Lisa,Leslie'"/&gt;
	  </p>
	  Note: I have single quotes around the names <em>'James,Johnny,Doug,Lisa,Leslie'</em>
	  <br/>
	  OR
	  	<p class="pre">
      &lt;cf_select name="state" list="'1:James,2:Johnny,3:Doug,4:Lisa,5:Leslie'"/&gt;
	  </p>
	  <br/>
	  <strong>Delimiters and valueDelimiters:</strong> You can change the delimiters with <em>delimiters</em> and <em>valueDelimiters</em>.  The default <em>delimiters</em> is comma (,) and the <em>valueDelimiters</em> is colon (:).  The delimiters for both <em>delimiters</em> and <em>valueDelimiters</em> cannot be the same.  For example:
	  	<p class="pre">
      &lt;cf_select name="state" list="'1=James;2=Johnny;3-Doug;4=Lisa;5-Leslie'" delimiters=";" valueDelimiters="=-"/&gt;
	  </p>
	  </li>
	 <br/> 
    <li>Populate with <em>valueList</em> and <em>optionList</em> attributes
	<p class="pre">
      &lt;cf_select name="state" valueList="code" optionList="name"/&gt;
	</p>
	  </li>
</ul>
<br/>
	<LI><p>Populate by Array
		<uL>
		    <li>Populate with an <em>array</em> attribute
				<p class="pre">
			      &lt;cf_select name="state" array="states"/&gt;
				 </p>
			</li>
		    <LI>Populate with <em>valueArray</em> and <em>optionArray</em> attributes
				<p class="pre">
			      &lt;cf_select name="state" valueArray="code" optionArray="name"/&gt;
				</p>
			</LI>
		</uL></p>
	</LI>
	<br/>
<h4>Populate by Object call</h4>
<br/>
So far all the lists, queries, and arrays are actual variables and not the results of object calls, but you can use objects to populate your select lists.  If you don't pass parameters into a method, you can call the method either by <em>object.method</em> or <em>object.method()</em>.  <em>object.method</em> is the prefer method. If you have to pass in parameters, you have to use <em>object.method(param1, param2, param3)</em>.  Make sure <em>param1</em>, <em>param2</em>, and <em>param3</em> exist.
<br/><br/>
<LI>If <em>lookup.getStates()</em> returns a query with two columns <em>code</em> and <em>name</em>:
	<p class="pre">
      &lt;cf_select name="state" query="lookup.getStates" value="code" option="name"/&gt;<br/>
      &lt;cf_select name="state" query="lookup.getStates()" value="code" option="name"/&gt;
	 </p>
</LI>
<LI>If <em>lookup.getStates()</em> returns a list of states:
	<p class="pre">
      &lt;cf_select name="state" list="lookup.getStates"/&gt;<br/>
      &lt;cf_select name="state" list="lookup.getStates()"/&gt;
	  </p> 
OR
	<p class="pre">
      &lt;cf_select name="state" optionList="lookup.getStates"/&gt;<br/>
       &lt;cf_select name="state" optionList="lookup.getStates()"/&gt;
	</p> 
</LI>
<LI>If <em>lookup.getStates()</em> returns an array of states:
	<p class="pre">
      &lt;cf_select name="state" array="lookup.getStates"/&gt;<br/>
      &lt;cf_select name="state" array="lookup.getStates()"/&gt;
	  </p> 
OR
	<p class="pre">
      &lt;cf_select name="state" valueArray="lookup.getStates"/&gt;<br/>
      &lt;cf_select name="state" valueArray="lookup.getStates()"/&gt;
	</p> 
</LI>
<br/>
<h4>Populate by More Than One Data Source</h4>
<br/>
You can populate the select list with more than one data type, more than one query, more than one list, or more than one array.  How? You can because you can populate the select list like a normal html select tag. For example:
<p class="pre">
&lt;ui:select table="state" value="state_cd"/&gt;
<span class="tab1">&lt;option value=""&gt;Select One...&lt;/option&gt;</span>
<span class="tab1">&lt;cfoutput query="qryTerritory"&gt;</span>
<span class="tab2">&lt;option value="#qryTerritory.code#"&gt;#qryTerritory.name#&lt;cfif qryTerritory.code eq attributes.state&gt; selected&lt;/cfif&gt;&lt;/option&gt;</span>
<span class="tab1">&lt;/cfoutput&gt;</span>
&lt;/ui:select&gt;
</p><br/>

<h4>Format with built-in functions</h4>
<br/>
We have not thoroughly tested, but you can use built-in functions to format your data.  For example:
	<p class="pre">
      &lt;cf_select name="state" query="lookup.getStates" value="code" option="ucase(name)"/&gt;<br/>
	 </p>
	 OR
	 <p class="pre">
      &lt;cf_select name="state" list="ucase('dc,va,md')"/&gt;<br/>
	 </p>
	 <br/>
<!--
    <LI>Populate by Structure</LI>
 	<UL><LI>Populate with <em>struct</em>, <em>valueKey</em>, and <em>optionKey</em> attributes
	<p class="pre">
      &lt;cf_select name="state" struct="states" valueKey="code" optionKey="name"/&gt;
	</p>
	</LI></UL>
-->
<h4>Don't Have to Specify Both</h4><br/>
	 <li><strong>Populate by QUERY, TABLE, and SQL:</strong> You don't always have to specify both <em>value</em> and <em>option</em> attributes.  If they are the same, you only have to specify one.</li><br/>
	 <li><strong>Populate by List:</strong> You don't always have to specify both <em>valueList</em> and <em>optionList</em> attributes.  If they are the same, you only have to specify one.</li><br/>
	 <li><strong>Populate by Array:</strong> You don't always have to specify both <em>valueArray</em> and <em>optionArray</em> attributes.  If they are the same, you only have to specify one.</li>
	<br/>
	
<h4>valueHeader and optionHeader</h4><br/>
In most select lists, the first option has blank value and the text <em>Select one...</em>.  We handle this option with <em>valueHeader</em> and <em>optionHeader</em> attributes.  By default this option is turned off.  To turn it on, you specify either <em>valueHeader</em> or <em>optionHeader</em> attribute.  By default <em>valueHeader</em> is blank.  If that is what you want, you can just specify <em>optionHeader</em>.  By default <em>optionHeader</em> is "Select...".  If that is what you want, you can just specify <em>valueHeader</em>.  You don't have to specify both attributes. For example:

<p class="pre">
&lt;ui:select table="state" value="state_cd" optionHeader="Select One..."/&gt;
</p>

If you all want select list on your site to have the same <em>optionHeader</em>, you can specify it using <em>request.ui.form.select.config.optionHeader</em>.

<p class="pre">
request.ui.form.select.config.optionHeader="Select One...";
</p>

You can also specify it like you would normally do in your HTML form.
<p class="pre">
&lt;ui:select table="state" value="state_cd"/&gt;
<span class="tab1">&lt;option value=""&gt;Select One...&lt;/option&gt;</span>
&lt;/ui:select&gt;
</p>


<br/>
<h4>Value to Check</h4>
<br/>
The <em>select</em> list will select the value on its own if there is a corresponding <em>attributes</em> variable.  If you want to use another variable to specify the selected value, you can use the <em>checkValue</em> attribute.  For example:
<p class="pre">
&lt;ui:select table="state" value="state_cd" option="state_nm" checkValue="qryAccount.state_cd"/&gt;
</p>
<br/>
<h4>Available Attributes</h4>
<table>
<tr>
<th>Attribute</th>
<th>Required</th>
<th>Default</th>
<th>Values</th>
<th>Description</th>
</tr>
<tr><td>checkValue</td><td>false</td><td></td><td></td><td>value to preset an option</td></tr>
<tr><td>optionHeader</td><td>false</td><td>Select...</td><td></td><td>The value for the first option</td></tr>
<tr><td>valueHeader</td><td>false</td><td>blank("")</td><td></td><td>The value for the first option</td></tr>

<tr><td colspan="5"><strong>Populate by Query</strong></td></tr>
<tr><td>option</td><td>true unless value is specified</td><td>value's value</td><td></td><td>query column name to populate the list's option texts</td></tr>
<tr><td>query</td><td>true</td><td></td><td></td><td>query name to populate the list</td></tr>
<tr><td>value</td><td>true unless option is specified</td><td>option's value</td><td></td><td>query column name to populate the list's option values</td></tr>

<tr><td colspan="5"><strong>Populate by Table</strong></td></tr>
<tr><td>columnList</td><td>false</td><td></td><td></td><td>A list of database table's columns</td></tr>
<tr><td>dsn</td><td>true</td><td></td><td></td><td>dsn name</td></tr>
<tr><td>option</td><td>true unless value is specified</td><td>value's value</td><td></td><td>table field name to populate the list's option texts</td></tr>
<tr><td>order</td><td>false</td><td>asc</td><td>asc<br/>desc</td><td>The order of sorting</td></tr>
<tr><td>result</td><td>false</td><td></td><td></td><td>name of the returned query</td></tr>
<tr><td>sort</td><td>false</td><td>value's column</td><td></td><td>the column to sort</td></tr>
<tr><td>table</td><td>true</td><td></td><td></td><td>database table name to populate the list</td></tr>
<tr><td>value</td><td>true unless option is specified</td><td>option's value</td><td></td><td>table field name to populate the list's option values</td></tr>

<tr><td colspan="5"><strong>Populate by SQL</strong></td></tr>
<tr><td>dsn</td><td>true</td><td></td><td></td><td>dsn name</td></tr>
<tr><td>option</td><td>true unless value is specified</td><td>value's value</td><td></td><td>table field name to populate the list's option texts</td></tr>
<tr><td>result</td><td>false</td><td></td><td></td><td>name of the returned query</td></tr>
<tr><td>sql</td><td>true unless cf_sql is used</td><td></td><td></td><td>SQL statement</td></tr>
<tr><td>value</td><td>true unless option is specified</td><td>option's value</td><td></td><td>table field name to populate the list's option values</td></tr>

<tr><td colspan="5"><strong>Populate by List 1</strong></td></tr>
<tr><td>delimiters</td><td>false</td><td>,</td><td></td><td>delimiters for option texts</td></tr>
<tr><td>list</td><td>true</td><td></td><td></td><td>a list variable name</td></tr>
<tr><td>valueDelimiters</td><td>false</td><td>:</td><td></td><td>delimiters for option values</td></tr>

<tr><td colspan="5"><strong>Populate by List 2</strong></td></tr>
<tr><td>delimiters</td><td>false</td><td>,</td><td></td><td>delimiters for option texts</td></tr>
<tr><td>optionList</td><td>true unless valueList is specified</td><td>valueList</td><td></td><td>a list variable name for option texts</td></tr>
<tr><td>valueDelimiters</td><td>false</td><td>:</td><td></td><td>delimiters for option values</td></tr>
<tr><td>valueList</td><td>true unless optionList is specified</td><td>optionList</td><td></td><td>a list variable name for option values</td></tr>

<tr><td colspan="5"><strong>Populate by Array 1</strong></td></tr>
<tr><td>array</td><td>true</td><td></td><td></td><td>an array variable name</td></tr>

<tr><td colspan="5"><strong>Populate by Array 2</strong></td></tr>
<tr><td>optionArray</td><td>true unless valueArray is specified</td><td>valueArray</td><td></td><td>an array variable name for option texts</td></tr>
<tr><td>valueArray</td><td>true unless optionArray is specified</td><td>optionArray</td><td></td><td>an array variable name for option values</td></tr>
</table>
</div></div>

          <div style="clear: both"></div>
        </div>
      </div>
      <!-- /wrapper --><!-- /main-content -->
      <div id="footer"><div class="wrapper">
        <hr /><a href="cf_form.html">&laquo; Previous</a> | <a href="cf_input.html">Next &raquo;</a>
        <p><div id='g_footer'>&nbsp;</div></p>
        <div style="clear: both"></div>
      </div></div>

      <!-- /wrapper --><!-- /footer -->
    </div>
  </div>
<!-- /wrapper --><!-- /container -->

<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div><div id="extraDiv4"><span></span></div>
<div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

</body>
</html>

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
     SymRealOnUnload();
}

function SymOnLoad()
{
  if(SymRealOnLoad != null)
     SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

